<template>
    <div id="base-info-list-item">
        <div class="imageBox">
            <img src="https://img.xiaopiu.com/userImages/img1498416d67dfef00.jpg">
        </div>
        <div class="info">
            <div class="top">
                <div class="title">
                    <h4>河南博物院</h4>
                    <el-rate
                            v-model="value"
                            disabled
                            show-score
                            text-color="#D43030"
                            score-template="{value}"
                            :colors="['#D45050', '#D45030', '#D43030']"
                    >
                    </el-rate>
                </div>
                <div class="link">
                    <!--                传统文化-->
                    <div class="traditional-culture" :style="flag ? backgroundColor : null" @click="flag=true">
                        <a :style="flag ? fontColor : null" href="javascript: void(0)">传统文化</a>

                    </div>
                    <div class="view-details" :style="!flag ? backgroundColor : null" @click="flag=false">
                        <a :style="!flag ? fontColor : null"  href="javascript: void(0)">查看详情</a>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="text">
                <span>
                    河南博物院创立于1927年，新馆于1998年5月正式开放，现为中央与地方共建的国家级博物馆。长期以来，被评为全国爱国主义教育示范基地、国家级科普教育基地、全国首批港澳青少年游学基地和各级中小学校外实践基地，其馆藏文物精美多样、陈列展览主题鲜明、教育活动丰富多彩，是面向广大中小学生群体开展文化服务和公众教育的文化窗口与互动平台。
                </span>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {Rate, Link} from "element-ui";

    export default {
        name: "BaseInfoListItem",
        components: {
            "el-rate": Rate,
            "el-link": Link,
        },
        data(){
            return{
                value: 3.7,
               flag: true

            }
        },
        computed: {
            fontColor(){
                return {
                    "color": "#fff"
                }
            },
            backgroundColor(){
                return{
                    "backgroundColor": "#d43030"
                }
            }
        }
    }
</script>

<style scoped>
    #base-info-list-item{
        display: flex;
        margin-top: 50px;
        margin-left: 30px;
        width: 1500px;
    }
    .imageBox, .imageBox img{
        width: 190px;
        height: 150px;
    }
    .title{
        display: flex;
        width: 350px;
        justify-content: space-between;
        margin-left: 20px;
        font-size: 20px;
        margin-top: 20px;
    }
    .top{
        display: flex;
    }
    .link{
        display: flex;
        margin-top: 20px;
        width: 220px;
        justify-content: space-evenly;
    }
    .link .traditional-culture, .link .view-details{
        width: 70px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 11px;

        color: white;
    }
    .link .traditional-culture a, .link .view-details a{
        color: #d43030;
        font-size: 15px;
        text-decoration: none;
    }
    .bottom{
        width: 714px;
        height: 90px;
        color: rgba(0, 0, 0, 1);
        font-size: 13px;
        line-height: 150%;
        text-align: left;
        margin-left: 20px;
    }
</style>
